<template>
    <div class="tabBar">
        <div class="tabBar-content">
            <div class="tabBar-content-item" :class="item.active ? 'tabBar-content-itemActive' : ''" v-for="(item, idx) in tabList" :key="idx" @click="TabClick(item, idx)">
                <div class="iconfont" :class="item.iconName" ></div>
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, h } from 'vue';
import './index.scss';
import Taro from '@tarojs/taro'
export default {
    components: {
    },
    setup(){
        const state = reactive({
            tabList: [ 
                {
                    iconName:  'icon-shouye',
                    name: '首页',
                    active: true,
                    targetUrl: '/pages/index/index'
                },
                {
                    iconName:  'icon-fenlei',
                    name: '分类',
                    active: false,
                    targetUrl: '/pages/menu/index'
                },
                {
                    iconName:  'icon-wode',
                    name: '我的',
                    active: false,
                    targetUrl: '/pages/user/index'
                }
            ]
        });
        onMounted(() => {
            if(Taro.getCurrentInstance().router?.params.activeIndex !=  undefined) {
                state.tabList = state.tabList.map((i,idx) => {
                    return Object.assign(i, {
                        active: idx == Taro.getCurrentInstance().router?.params.activeIndex ? true : false
                    })
                });
            };
        })
        const TabClick = (tarVal, tarIndex) => { 
            Taro.reLaunch({
                url: `${tarVal.targetUrl}?activeIndex=${tarIndex}`,
                success: (res) => {
                }
            })
        }


        return {
            TabClick,
            ...toRefs(state)
        }
    }
}
</script>
  